<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>%VITE_APP_TITLE%</title>

    <style>
      body {
        /* background-color: #f0f2f5; */
      }

      .app-loading {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* background: #f0f2f5; */
      }

      .app-loading .app-loading-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .app-loading .app-loading-title {
        /* margin-bottom: 30px; */
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }

      .colorful-text {
        -webkit-text-fill-color: transparent !important;
        background: -webkit-linear-gradient(
          120deg,
          oklch(61.42% 0.238 15.34) 0%,
          oklch(51.01% 0.274 263.83)
        ) !important;
        background-clip: text !important;
      }

      .app-loading .app-loading-subtitle {
        margin-bottom: 30px;
        font-size: 12px;
      }

      .app-loading .app-loading-logo {
        width: 100px;
        margin: 0 auto 15px auto;
      }

      .app-loading .app-loading-item {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        vertical-align: middle;
        border-radius: 50%;
      }

      .app-loading .app-loading-outter {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid #2d8cf0;
        border-bottom: 0;
        border-left-color: transparent;
        border-radius: 50%;
        animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
      }

      .app-loading .app-loading-inner {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border: 4px solid #87bdff;
        border-right: 0;
        border-top-color: transparent;
        border-radius: 50%;
        animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
      }

      @-webkit-keyframes loader-outter {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @keyframes loader-outter {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes loader-inner {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        100% {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
        }
      }

      @keyframes loader-inner {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        100% {
          -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
        }
      }
    </style>

    <style>
      .loading,
      .loading > div {
        position: relative;
        box-sizing: border-box;
      }

      .loading {
        display: block;
        font-size: 0;
        color: #40a9ff;
      }

      .loading.la-dark {
        color: #40a9ff;
      }

      .loading > div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid currentColor;
      }

      .loading {
        margin: 0 auto;
        width: 32px;
        height: 32px;
      }

      .loading > div {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        margin-left: -4px;
        border-radius: 100%;
        animation: ball-spin-fade 1s infinite linear;
      }

      .loading > div:nth-child(1) {
        top: 5%;
        left: 50%;
        animation-delay: -1.125s;
      }

      .loading > div:nth-child(2) {
        top: 18.1801948466%;
        left: 81.8198051534%;
        animation-delay: -1.25s;
      }

      .loading > div:nth-child(3) {
        top: 50%;
        left: 95%;
        animation-delay: -1.375s;
      }

      .loading > div:nth-child(4) {
        top: 81.8198051534%;
        left: 81.8198051534%;
        animation-delay: -1.5s;
      }

      .loading > div:nth-child(5) {
        top: 94.9999999966%;
        left: 50.0000000005%;
        animation-delay: -1.625s;
      }

      .loading > div:nth-child(6) {
        top: 81.8198046966%;
        left: 18.1801949248%;
        animation-delay: -1.75s;
      }

      .loading > div:nth-child(7) {
        top: 49.9999750815%;
        left: 5.0000051215%;
        animation-delay: -1.875s;
      }

      .loading > div:nth-child(8) {
        top: 18.179464974%;
        left: 18.1803700518%;
        animation-delay: -2s;
      }

      .loading.la-sm {
        width: 16px;
        height: 16px;
      }

      .loading.la-sm > div {
        width: 4px;
        height: 4px;
        margin-top: -2px;
        margin-left: -2px;
      }

      .loading.la-2x {
        width: 64px;
        height: 64px;
      }

      .loading.la-2x > div {
        width: 16px;
        height: 16px;
        margin-top: -8px;
        margin-left: -8px;
      }

      .loading.la-3x {
        width: 96px;
        height: 96px;
      }

      .loading.la-3x > div {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        margin-left: -12px;
      }

      @keyframes ball-spin-fade {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.25;
          transform: scale(0.5);
        }
      }
    </style>

    <style>
      .light body {
        background-color: #f0f2f5;
      }
      .dark body {
        background-color: #242525;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="app-loading">
        <div class="app-loading-wrap">
          <div style="display: flex; gap: 128px">
            <div class="app-loading-title">
              <img src="/logo.svg" class="app-loading-logo" />
              <div
                class="app-loading-title afc-logo-text"
                style="letter-spacing: 9px; position: relative; left: 4px"
              >
                东风汽车金融
              </div>
              <div class="app-loading-subtitle afc-logo-text">DONGFENG AUTO FINANCE</div>
            </div>
            <!-- <div class="app-loading-title">
                    <img src="/dragon-logo.svg" class="app-loading-logo" />
                    <div class="app-loading-title colorful-text" style="letter-spacing: 4px;position: relative; left: 2px;">%VITE_APP_TITLE%</div>
                    <div class="app-loading-subtitle colorful-text">BIG DATA RISK CTL. PLATFORM</div>
                </div> -->
          </div>
          <div class="app-loading-item" style="margin-top: 128px">
            <div class="loading">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
          <div class="app-loading-text" style="margin-top: 0px; color: #595959"> 正在加载资源 </div>
          <div style="margin-top: 24px; color: #888"> 初次加载资源可能需要较多时间 请耐心等待 </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>

    <script type="text/javascript">
      let lightConfig = {
        bkColor: '#f0f2f5',
        logoOpacity: '1',
        afcLogoTextColor: 'black',
        loadingTextColor: '#595959',
        loadingSubTextColor: '#888'
      }
      let darkConfig = {
        bkColor: '#242525',
        logoOpacity: '0.8',
        afcLogoTextColor: '#8c8c8c',
        loadingTextColor: '#f5f5f5',
        loadingSubTextColor: '#888'
      }

      let isDark = JSON.parse(localStorage.getItem('isDark')).v === 'true'
      document.documentElement.classList.add(isDark ? 'dark' : 'light')

      let colorConfig = isDark ? darkConfig : lightConfig
      // debugger
      // document.body.style.backgroundColor = colorConfig.bkColor;
      // document.getElementsByClassName("app-loading")[0].style.backgroundColor = colorConfig.bkColor;
      // document.body.style.backgroundColor = undefined;
      document.getElementsByClassName('app-loading-logo')[0].style.opacity = colorConfig.logoOpacity
      // document.getElementsByClassName('app-loading-logo')[1].style.opacity = colorConfig.logoOpacity
      document.getElementsByClassName('app-loading-text')[0].style.color =
        colorConfig.loadingTextColor
      document.getElementsByClassName('afc-logo-text')[0].style.color = colorConfig.afcLogoTextColor
      // document.getElementsByClassName('afc-logo-text')[1].style.color = colorConfig.afcLogoTextColor
    </script>
  </body>
</html>
